<template>
    <div class="movie-table">
        <el-table :data="movies" style="width: 100%" stripe>
            <el-table-column prop="rank" label="排名" width="70" />
            <el-table-column label="电影" min-width="220">
                <template #default="{ row }">
                    <div class="movie-info">
                        <div class="image-wrapper" @click="showMovieDetail(row)">
                            <el-image
                                :src="getPosterUrl(row)"
                                fit="cover"
                                loading="lazy"
                                class="movie-poster"
                                :alt="row.title"
                            >
                                <template #error>
                                    <div class="poster-placeholder">
                                        <el-icon><Picture /></el-icon>
                                    </div>
                                </template>
                            </el-image>
                        </div>
                        <div class="info-content">
                            <div class="title">{{ row.title }}</div>
                            <div class="details">
                                <span>{{ row.year }}</span>
                                <span v-if="row.countries && row.countries.length">
                                    {{ row.countries.join("/") }}
                                </span>
                                <span v-if="row.genres && row.genres.length">
                                    {{ row.genres.join("/") }}
                                </span>
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="directors" label="导演" min-width="120">
                <template #default="{ row }">
                    {{ row.directors ? row.directors.join(", ") : "" }}
                </template>
            </el-table-column>
            <el-table-column prop="rating" label="评分" width="100">
                <template #default="{ row }">
                    <div class="rating">
                        <span class="score">{{ row.rating }}</span>
                        <div class="rating-bar">
                            <div class="inner" :style="{ width: parseFloat(row.rating) * 10 + '%' }"></div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="主演" min-width="180">
                <template #default="{ row }">
                    {{ row.actors ? row.actors.slice(0, 3).join(", ") : "" }}
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination">
            <el-pagination
                layout="prev, pager, next"
                :total="totalMovies"
                :page-size="10"
                @current-change="handlePageChange"
            />
        </div>

        <!-- 电影详情对话框 -->
        <el-dialog v-model="dialogVisible" :title="selectedMovie?.title" width="70%" destroy-on-close>
            <div class="movie-detail" v-if="selectedMovie">
                <div class="detail-header">
                    <div class="poster-container">
                        <el-image :src="getPosterUrl(selectedMovie)" fit="contain" class="detail-poster">
                            <template #error>
                                <div class="poster-placeholder large">
                                    <el-icon><Picture /></el-icon>
                                </div>
                            </template>
                        </el-image>
                    </div>
                    <div class="detail-info">
                        <h2 class="detail-title">
                            {{ selectedMovie.title }} <span class="year">({{ selectedMovie.year }})</span>
                        </h2>
                        <div class="detail-meta">
                            <div class="meta-item">
                                <span class="meta-label">评分：</span>
                                <span class="meta-value rating-value">{{ selectedMovie.rating }}</span>
                            </div>
                            <div class="meta-item">
                                <span class="meta-label">类型：</span>
                                <span class="meta-value">{{
                                    selectedMovie.genres ? selectedMovie.genres.join("、") : "未知"
                                }}</span>
                            </div>
                            <div class="meta-item">
                                <span class="meta-label">国家/地区：</span>
                                <span class="meta-value">{{
                                    selectedMovie.countries ? selectedMovie.countries.join("、") : "未知"
                                }}</span>
                            </div>
                            <div class="meta-item">
                                <span class="meta-label">导演：</span>
                                <span class="meta-value">{{
                                    selectedMovie.directors ? selectedMovie.directors.join("、") : "未知"
                                }}</span>
                            </div>
                            <div class="meta-item">
                                <span class="meta-label">主演：</span>
                                <span class="meta-value">{{
                                    selectedMovie.actors ? selectedMovie.actors.slice(0, 5).join("、") : "未知"
                                }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="detail-summary">
                    <h3>剧情简介</h3>
                    <p>{{ selectedMovie.plot_summary || "暂无简介" }}</p>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { ref } from "vue";
import { Picture } from "@element-plus/icons-vue";

export default {
    name: "MovieTable",
    components: {
        Picture,
    },
    props: {
        movies: {
            type: Array,
            required: true,
        },
        totalMovies: {
            type: Number,
            default: 0,
        },
    },
    emits: ["page-change"],
    setup(props, { emit }) {
        const dialogVisible = ref(false);
        const selectedMovie = ref(null);

        const showMovieDetail = (movie) => {
            selectedMovie.value = movie;
            dialogVisible.value = true;
        };

        const getPosterUrl = (movie) => {
            // 根据电影排名构建海报URL
            const source = movie.source || "Douban"; // 默认以豆瓣为源
            const rank = movie.rank;
            const title = movie.title;

            // 获取原始排名（如果存在）
            let originalRank = rank;
            if (movie.rankings) {
                if (source === "Douban" && movie.rankings.Douban) {
                    originalRank = movie.rankings.Douban;
                } else if (source === "Maoyan" && movie.rankings.Maoyan) {
                    originalRank = movie.rankings.Maoyan;
                }
            }

            // 构建海报URL
            let posterUrl = "";

            if (source === "Douban") {
                // 尝试使用原始排名
                posterUrl = `/douban_images/${originalRank}_${title}.jpg`;
                return posterUrl;
            } else {
                // 尝试使用原始排名
                posterUrl = `/maoyan_images/${originalRank}_${title}.jpg`;
                return posterUrl;
            }
        };

        const handlePageChange = (page) => {
            emit("page-change", page);
        };

        return {
            dialogVisible,
            selectedMovie,
            showMovieDetail,
            getPosterUrl,
            handlePageChange,
        };
    },
};
</script>

<style scoped>
.movie-table {
    margin: 20px 0;
}

.movie-info {
    display: flex;
    align-items: center;
}

.image-wrapper {
    width: 50px;
    height: 70px;
    margin-right: 10px;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}

.movie-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.image-wrapper:hover .movie-poster {
    transform: scale(1.1);
}

.poster-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    color: #909399;
}

.poster-placeholder.large {
    height: 300px;
    font-size: 24px;
}

.info-content {
    flex: 1;
}

.movie-info .title {
    font-weight: bold;
    margin-bottom: 5px;
}

.movie-info .details {
    font-size: 0.8em;
    color: #666;
}

.movie-info .details span:not(:last-child)::after {
    content: " · ";
    margin: 0 3px;
}

.rating {
    display: flex;
    align-items: center;
}

.rating .score {
    font-weight: bold;
    margin-right: 10px;
    color: #faaf00;
}

.rating-bar {
    width: 60px;
    height: 6px;
    background-color: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
}

.rating-bar .inner {
    height: 100%;
    background-color: #faaf00;
    border-radius: 3px;
}

.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

/* 电影详情样式 */
.movie-detail {
    padding: 10px;
}

.detail-header {
    display: flex;
    margin-bottom: 20px;
}

.poster-container {
    width: 200px;
    flex-shrink: 0;
    margin-right: 20px;
}

.detail-poster {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.detail-info {
    flex: 1;
}

.detail-title {
    margin-top: 0;
    margin-bottom: 15px;
}

.detail-title .year {
    font-weight: normal;
    color: #909399;
}

.detail-meta {
    margin-bottom: 20px;
}

.meta-item {
    margin-bottom: 8px;
}

.meta-label {
    color: #909399;
}

.meta-value {
    color: #303133;
}

.rating-value {
    font-weight: bold;
    color: #faaf00;
    font-size: 1.2em;
}

.detail-summary {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.detail-summary h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #303133;
}

.detail-summary p {
    line-height: 1.6;
    color: #606266;
    text-indent: 2em;
}
</style>
